<!-- selectgoods.vue -->
<script setup>
import { ref, defineEmits, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { queryInventoryApi } from '@/api/warehousingentry/warehousing'
// 假设 API 存在
// import { getGoodsByWarehouse } from '@/api/stocktaking/goods'

const emit = defineEmits(['confirm', 'cancel'])

const dialogVisible = ref(false)
const warehouseId = ref(null)

// 筛选条件
const filters = ref({
  warehouseName: '',
  locationCode: '',
  goodsName: '',
  specCode: ''
})

// 数据
const goodsList = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)

// 加载数据
const fetchGoods = async () => {
  try {
    const dto = {
      warehouseName: filters.value.warehouseName,
      commodityName: filters.value.commodityName,
      skuCode: filters.value.skuCode
    }

    const res = await queryInventoryApi(currentPage.value, pageSize.value, dto)
    goodsList.value = res.rows
    total.value = res.total
  } catch (error) {
    ElMessage.error('获取商品失败')
  }
}

// 搜索
const search = () => {
  currentPage.value = 1
  fetchGoods()
}

// 重置
const reset = () => {
  filters.value = { warehouseName: '', locationCode: '', goodsName: '', specCode: '' }
  search()
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchGoods()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchGoods()
}

// 选择商品
const selectedRows = ref([])

const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 确认
const confirm = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.error('请至少选择一个商品')
    return
  }
  emit('confirm', selectedRows.value)
  dialogVisible.value = false
}

// 取消
const cancel = () => {
  dialogVisible.value = false
}

// 打开弹窗
const open = (id) => {
  warehouseId.value = id
  dialogVisible.value = true
  fetchGoods()
}

defineExpose({
  open
})
</script>

<template>
  <el-dialog v-model="dialogVisible" title="库存选择框" width="1000px" :close-on-click-modal="false">
    <div class="select-container">
      <!-- 左侧筛选 -->
      <div class="left-panel">
        <div class="filter-item">
          <el-input v-model="filters.warehouseName" placeholder="仓库名称" clearable />
        </div>
        <div class="filter-item">
          <el-input v-model="filters.locationCode" placeholder="库位编码" clearable />
        </div>
        <div class="filter-item">
          <el-input v-model="filters.goodsName" placeholder="商品名称" clearable />
        </div>
        <div class="filter-item">
          <el-input v-model="filters.specCode" placeholder="规格编码" clearable />
        </div>
        <div class="filter-actions">
          <el-button size="small" @click="search">搜索</el-button>
          <el-button size="small" @click="reset">重置</el-button>
        </div>
      </div>

       <!-- 右侧表格 -->
      <div class="right-panel">
        <el-table :data="goodsList" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="#" width="50" />
          <el-table-column prop="warehouseName" label="仓库名称" />
          <el-table-column prop="warehouseAreaName" label="库区名称" />
          <el-table-column prop="warehouseAreaLocaLocaCode" label="库位编码" />
          <el-table-column prop="skuCode" label="规格编码" />
          <el-table-column prop="skuTitle" label="商品名称" />
          <el-table-column prop="count" label="数量" />
          <el-table-column prop="price" label="价格" />
          <el-table-column prop="createTime" label="创建时间" />
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.select-container {
  display: flex;
  height: 600px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.left-panel {
  width: 250px;
  padding: 20px;
  border-right: 1px solid #ebeef5;
}

.filter-item {
  margin-bottom: 15px;
}

.filter-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.right-panel {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>